<!--
 * @Descripttion: 学生个人信息
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-26 21:06:15
 * @LastEditors: hzx
 * @LastEditTime: 2021-05-14 18:30:46
-->
<template>
    <div class="InfoStu">
        <template v-for="item in state.data" :key="item.stu_id">
            <a-descriptions title="个人信息" bordered>
                <a-descriptions-item label="姓名">
                    {{ item.stu_name }}
                </a-descriptions-item>
                <a-descriptions-item label="性别">
                    {{ item.stu_sex === 1 ? "男" : "女" }}
                </a-descriptions-item>
                <a-descriptions-item label="政治面貌">
                    {{
                        item.member === 0
                            ? "群众"
                            : item.member === 1
                            ? "团员"
                            : "党员"
                    }}
                </a-descriptions-item>
                <a-descriptions-item label="班级">
                    {{ item.class_name }}
                </a-descriptions-item>
                <a-descriptions-item label="学号">
                    {{ item.stu_id }}
                </a-descriptions-item>
                <a-descriptions-item label="班级职务">
                    {{ item.position }}
                </a-descriptions-item>

                <a-descriptions-item label="入学时间">
                    {{ item.rx_time }}
                </a-descriptions-item>
                <a-descriptions-item label="毕业时间" :span="2"
                    >2021-06-24</a-descriptions-item
                >
                <a-descriptions-item label="社团" :span="3">
                    {{ item.association }}
                </a-descriptions-item>

                <a-descriptions-item label="个人简介">
                    <div v-html="item.info"></div>
                </a-descriptions-item>
            </a-descriptions>
        </template>
        <div class="updateBtn">
            <a-button type="primary" @click="showModal">修改</a-button>
        </div>
        <!-- 修改信息弹窗 -->
        <a-modal
            v-model:visible="visible"
            title="修改个人信息"
            ok-text="确认"
            cancel-text="取消"
            @ok="hideModal(state.data[0])"
        >
            <a-form
                :model="state.data"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-item label="姓名">
                    <a-input
                        placeholder="请输入你的姓名"
                        v-model:value="state.data[0].stu_name"
                    />
                </a-form-item>
                <a-form-item label="性别">
                    <a-radio-group v-model:value="state.data[0].stu_sex">
                        <a-radio :value="0">女</a-radio>
                        <a-radio :value="1">男</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="班级">
                    <a-input
                        disabled
                        placeholder="班级"
                        v-model:value="state.data[0].class_name"
                    />
                </a-form-item>
                <a-form-item label="宿舍">
                    <a-input
                        placeholder="请输你的宿舍"
                        v-model:value="state.data[0].dormitory"
                    />
                </a-form-item>
                <a-form-item label="班级职务">
                    <a-input
                        placeholder="请修改你的班级职务"
                        v-model:value="state.data[0].position"
                    />
                </a-form-item>
                <a-form-item label="政治面貌">
                    <a-select
                        v-model:value="state.data[0].member"
                        placeholder="政治面貌"
                    >
                        <a-select-option :value="0">群众</a-select-option>
                        <a-select-option :value="1">共青团员</a-select-option>
                        <a-select-option :value="2">中共党员</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="入学时间">
                    <a-date-picker
                        v-model:value="state.data[0].rx_time"
                        disabled
                        show-time
                        type="date"
                        placeholder="请选择您的入学时间"
                        style="width: 100%"
                        format="YYYY-MM-DD"
                    />
                </a-form-item>
                <a-form-item label="个人简介">
                    <a-textarea
                        v-model:value="state.data[0].info"
                        placeholder="请输入你的个人简介"
                        :rows="4"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import { selectStudentId, updateStudent } from "@/api/student";
import { reactive, onMounted } from "vue";
import { defineComponent, ref, createVNode } from "vue";
import { useStore } from "vuex";
export default defineComponent({
    setup() {
        const store = useStore();
        let state = reactive({
            data: [],
        });

        onMounted(async () => {
            //获取学生信息
            state.data = await selectStudentId(store.state.resourceId.stu_id);
            //console.log(state.data);
        });

        //学生修改信息
        const visible = ref(false);

        const showModal = async (state) => {
            //打开修改对话框
            visible.value = true;
        };

        const hideModal = async (state) => {
            //console.log(state);
            await updateStudent(state);
            visible.value = false;
            state.data = await selectStudentId(store.state.resourceId.stu_id);
        };

        return {
            state,
            //修改学生信息弹窗
            visible,
            showModal,
            hideModal,
            //表单
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 15,
            },
        };
    },
});
</script>

<style lang="less" scoped>
.InfoStu {
    .updateBtn {
        margin: 15px 50%;
        text-align: cente;
    }
}
.ant-form-item {
    margin-bottom: 10px;
}
</style>